import { Meta, IconGallery, IconItem, Subtitle } from '@storybook/addon-docs/blocks';
const svgFile = require('../../config/silo/svgs.json');
const icons = svgFile.svgs;

<Meta title="Tokens/Icons"
parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true }}}}
/>

# Icons

<Subtitle>A collection of simply beautiful icons</Subtitle>

When adding new icons keep in mind that by stripping `fill` inline attributes fron inside the svg file usually they can be styled using css rules.  This way an icon can serve in an color combination.

<IconGallery>
  {
    icons.map((icon)=>{
      const url = `images/spritemap.svg#${icon}`;
      return (
        <IconItem name={icon} key={icon}>
          <svg viewBox="0 0 500 500">
            <use xlinkHref={url}></use>
          </svg>
        </IconItem>
      )
    })
  }
</IconGallery>
